<template>
        <div id="drzx" class="container-fluid padding">
            <!--所有上传的文件列表-->
            所有上传的xml文件列表
            <table class="layui-hide" id="filelist" lay-filter="filelist"></table>
            <script type="text/html" id="fileBar">
              <a class="layui-btn layui-btn-xs"  lay-event="download" href="#" target="_blank">下载</a>
              <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
              <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
            </script>
            <!--重新上传下载ivr文件-->
            <div class="layui-btn-container small" style="display: none">
                <a class="layui-btn layui-btn-sm" :href="ivrurl" download="IVREditor.exe">
                    <span>下载ivr编辑程序</span>
                </a>
            </div>
            <!--文件上传-->
            <div class="layui-upload-drag" id="upload">
                <i class="layui-icon"></i>
                <p>点击上传，或将文件拖拽到此处，仅支持xml后缀的文件</p>
            </div>

        </div>
</template>

<script>
    import {formatSize,formatDateTime} from '../../../../common/js/util';
    export default {
        name: "index",
        beforeCreate: function(){
            this.$nextTick(function () {
                // 坐席的表格数据,首次加载出来dom
                layui.use('table');
                // 坐席文件的上传
                layui.use('upload');
            });
        },
        created:function(){
            this.$nextTick(function () {
                var that = this;
                // 再次加载出表格数据（之前已经加载出来了dom数据）
                layui.use('table',function () {//加这个是防止刷新的时候会出现不存在render方法
                    // 再次加载出表格数据（之前已经加载出来了dom数据）
                    layui.table.render({
                        elem: '#filelist'
                        ,height: 400
                        ,totalRow: true
                        ,toolbar: '#fileToolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                        ,url: burl+'cti-manager-ivr/file-list/' //数据接口
                        ,page: true //开启分页
                        ,cols: [that.file_table_head]
                    });
                    //监听行工具事件
                    layui.table.on('tool(filelist)', function(obj){
                        if(obj.event === 'del'){
                            layer.confirm('确认删除该行吗？', function(index){
                                layer.close(index);
                                that.$post('cti-manager/file-delete?id='+obj.data.id,{})
                                .then((response) => {//这里使用了ES6的语法
                                    if (response.data == 1) {
                                        obj.del();
                                        layer.close(index);
                                        layer.msg("删除成功！",{icon:1});
                                    }else{
                                        layer.msg("删除失败！",{icon:2});
                                    }
                                }).catch((response) => {
                                    layer.msg("删除失败！",{icon:2});
                                });
                            });
                        } else if(obj.event === 'download'){
                            $(obj.tr).find("[lay-event=download]").attr("href",obj.data.path);
                            $(obj.tr).find("[lay-event=download]").attr("download",obj.data.name);
                            $(obj.tr).find("[lay-event=download]").click();
                        } else if(obj.event === 'edit'){
                            //弹出的 编辑页面
                            layer.open({
                                type: 2,
                                fixed: false, //不固定
                                maxmin: true,
                                area: ['80%', '70%'], //宽高
                                shadeClose: true,
                                content:"#/ivr/edit?header=false&navs=false&id="+obj.data.id+"&path="+obj.data.path+"&name="+obj.data.name,
                            });
                        }
                    });
                });
                layui.use('upload',function () {//加这个是防止刷新的时候会出现不存在render方法
                    //执行实例
                    layui.upload.render({
                        elem: '#upload' //绑定元素
                        , url: burl+'cti-manager-ivr/upload/' //上传接口
                        , done: function (res, index, upload) {
                            //上传完毕回调
                            if (res === 1){//文件已经存在，请重新上传
                                layer.msg("文件已经上传，请重新上传！", {icon: 2});
                            }
                            if (res === true){//文件上传成功，请重新上传
                                layer.confirm("文件上传成功！",function (index) {
                                    layer.close(index);
                                    refresh();
                                });
                            }
                        }
                        ,error: function(index, upload){
                        },
                        accept: 'file', //允许上传的文件类型
                        exts: 'xml' //允许上传的文件后缀
                    });
                });
            });

        },
        mounted: function(){
            this.$nextTick(function () {
            });
        },
        data() {
            return {

                ivrurl: this.$axios.defaults.baseURL+"downloads/cti/IVREditor.exe",
                file_table_head:[
                    {field: 'id',  title: '序列号', sort: true}
                    , {field: 'name',  title: '文件名称', sort: true}
                    , {field: 'path',  title: '文件路径', sort: true}
                    , {field: 'filesize',
                        title: '文件大小',
                        sort: true,
                        templet: function(res){
                            return formatSize(res.filesize);
                        }}
                    , {field: 'create_at',
                        title: '创建时间',
                        sort: true,
                        templet: function(res){
                            return formatDateTime(res.create_at);
                        }}
                    , {field: 'update_at',
                        title: '更新时间',
                        sort: true,
                        templet: function(res){
                            return formatDateTime(res.update_at);
                        }}
                    , {fixed: 'right',
                        width: 165,
                        align:'center',
                        templet: '#fileBar',
                    }
                ],
            }
        },
        updated: function(){
            this.$nextTick(function () {
            });
        },
        methods: {
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

    //修改这两者以达到让layui的左边不要太小了
    .layui-form-pane .layui-form-label{
        width:250px
    }
    .layui-form-pane .layui-input-block {
        margin-left: 250px;
    }
</style>
